<template>
  <div class="solutionPanel-container">
    <detailTitle title="解决方案"></detailTitle>
    <div class="solution-desc-box">
      <div class="solution-desc">
        <div class="solution-block">
          <div
            v-if="
              !progress.fit_tuina &&
                progress.stick.length === 0 &&
                progress.physical.length === 0 &&
                progress.bubble.length === 0
            "
            class="solution-block-nothing"
          >
            <img src="@/assets/img/no_progress.png" alt="" />
          </div>
          <template v-else>
            <div class="title">外调</div>
            <div class="list">
              <div v-if="typeof progress.fit_tuina === 'string'">
                推拿：{{ progress.fit_tuina }}
              </div>
              <div v-else-if="progress.fit_tuina.length">
                推拿：{{ progress.fit_tuina.map(e => e.type_name).join('、') }}
              </div>
              <div v-if="progress.stick.length > 0" class="progress_ways">
                <div class="progress_title">贴敷：</div>
                <div>
                  <div v-for="(item, index) in progress.stick" :key="index">
                    {{ item.type_name }} -- {{ item.describe }}
                  </div>
                </div>
              </div>
              <div
                v-if="progress.physical && progress.physical.length > 0"
                class="progress_ways"
              >
                <div class="progress_title">理疗：</div>
                <div>
                  <div v-for="(item, index) in progress.physical" :key="index">
                    {{ item.type_name }} -- {{ item.describe }}
                  </div>
                </div>
              </div>
              <div
                v-if="progress.bubble && progress.bubble.length > 0"
                class="progress_ways"
              >
                <div class="progress_title">泡浴：</div>
                <div>
                  <div v-for="(item, index) in progress.bubble" :key="index">
                    {{ item.type_name }} -- {{ item.describe }}
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
        <div class="solution-block">
          <div
            v-if="
              progress.nutrition.length === 0 && progress.medicine.length === 0
            "
            class="solution-block-nothing"
          >
            <img src="@/assets/img/no_progress.png" alt="" />
          </div>
          <template v-else>
            <div class="title">内服</div>
            <div
              v-show="progress.nutrition.length > 0"
              class="list"
              style="margin-bottom:20px"
            >
              <div class="sub-title">营养补充：</div>
              <div
                v-for="(item, index) in progress.nutrition"
                :key="index"
                class="list-item"
              >
                {{ item.type_name }} -- {{ item.describe }}
              </div>
            </div>
            <div class="list">
              <div class="sub-title">药食同源：</div>
              <div
                v-for="(item, index) in progress.medicine"
                :key="index"
                class="list-item"
              >
                {{ item.type_name }} -- {{ item.describe }}
              </div>
            </div>
          </template>
        </div>
      </div>
      <div class="bottom-desc" :style="{'min-height': showWx ? '0px' : '20px'}">
        <template v-if="showWx">
          <span style="color:#4b90ff;margin-right:10px">参考文献:</span>
          <span
            v-for="(item, index) in progress.book"
            :key="index"
            style="color:#333"
            >{{ item.from_book }}</span
          >
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import detailTitle from './detailTitle';

export default {
  components: {
    detailTitle
  },
  props: {
    progress: {}
  },
  computed: {
    showWx() {
      return this.progress.book && this.progress.book.length > 0;
    }
  }
};
</script>
<style lang="scss" scoped>
.solutionPanel-container {
  .solution-desc-box {
    background-color: #fff;
    .bottom-desc {
      font-size: 16px;
      padding: 10px 20px;
    }
  }
  .solution-desc {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 16px;
    .solution-block {
      width: 49%;
      background-color: #f2f6ff;
      padding: 20px;
      box-sizing: border-box;
      height: 265px;
      font-size: 16px;
      overflow-y: auto;
      overflow-x: hidden;
      .solution-block-nothing {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        img {
          width: 150px;
        }
      }
      .title {
        font-size: 16px;
        color: #4b90ff;
        margin-bottom: 20px;
        font-weight: bold;
      }
      .list {
        line-height: 30px;
        color: #333;
        .progress_title {
          min-width: 50px;
        }
        .progress_ways {
          display: flex;
          margin-top: 20px;
        }
      }
    }
  }
}
</style>
